<!--
- File:    租花服务页.
-->
<template>
  <div class="Web_Box">
    <div class="ordertop">
      <span>商品数：{{countOrderGoodsNum}}件</span><span class="pl30">租用时长：{{orderInfo.rent_info.r_rent_time}}个月</span><span class="pl30">总金额：{{orderTotalMoney}}</span>
      <a v-if="orderInfo.rent_info.r_compact" style="float: right; color: white" :href="$config.imgsite + $config.compactSrc + orderInfo.rent_info.r_compact">合同</a>
    </div>
    <a class="orderbtn" @click="gotoOrderDetail">查看订单详情</a>

    <div class="Service">服务详情</div>
    <div class="bg_fff mb10">
      <div class="diary2" v-for="(service, serviceIndex) in rentInfo.service">
        <ul class=" f-cb">
          <li>
            <h3 class="d_tit2">{{service.s_month | timestampToDate('yyyy年MM月')}}</h3>
            <p class="tex>" v-if="(orderInfo.rent_info.r_order_amount - orderInfo.order_info.integral_amount - orderInfo.order_info.voucher_price)/rentInfo.service.length * (serviceIndex + 1) > payedTotalMoney">{{serviceIndex + 1}}/{{rentInfo.service.length}}  <span class="cr_f23030">需要支付</span>
            </p>
            <p class="tex" v-else>{{serviceIndex + 1}}/{{rentInfo.service.length}}  {{service.s_state == '0' ? '商家未服务' : '商家已服务'}}</p>
          </li>
          <li><a class="order_close" v-show="service.s_state == '0'">待服务</a></li>
          <li><a class="order_close2" v-show="service.s_state == '1'" @click="confirmServer(service)">确认服务</a></li>
          <li><a class="order_close" v-show="service.s_state == '2'">已完成</a></li>
        </ul>
      </div>
    </div>
    <div class="Service" v-if="rentInfo.installment && rentInfo.installment.length > 0">订单分期（{{rentInfo.installment.length}}期）</div>
    <div class="bg_fff mb10" v-if="rentInfo.installment && rentInfo.installment.length > 0">
      <div class="diary2" v-for="(installment, installmentIndex) in rentInfo.installment">
        <ul class="f-cb">
          <li>
            <h3 class="d_tit2">{{installment.i_pre_pay_time | timestampToDate('yyyy年MM月')}}</h3>
            <p class="tex">{{installmentIndex + 1}}/{{rentInfo.installment.length}}  ￥{{installment.i_per_amount}}</p>
          </li>
          <li><a class="order_close2" v-show="installment.i_pay_state == '0'" @click="pay(installment)">支付</a></li>
          <li><a class="order_close" v-show="installment.i_pay_state == '1'">已支付</a></li>
        </ul>
      </div>
    </div>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  import payPop from '../../../components/payPop'

  export default{
    data() {
      return {
        orderId: this.$route.params.id,
        rentInfo: {installment: [], service: []},
        orderInfo: {add_list: {}, order_info: {extend_order_common: {}, extend_order_goods: []}, rent_info: {}}
      }
    },
    created() {
      this.getOrderInfo(this.orderId)
      this.getRentOrderInfo(this.orderId)
    },
    computed: {
      // 订单总金额（含押金）
      orderTotalMoney () {
        return (parseFloat(this.orderInfo.rent_info.r_deposit || 0) + parseFloat(this.orderInfo.rent_info.r_order_amount) + parseFloat(this.orderInfo.order_info.shipping_fee || 0)).toFixed(2)
      },
      // 商品总数
      countOrderGoodsNum() {
        let count = 0
        if (this.orderInfo.order_info.extend_order_goods.length <= 0) {
          return count
        }
        for (let i = 0; i < this.orderInfo.order_info.extend_order_goods.length; i++) {
          count += parseInt(this.orderInfo.order_info.extend_order_goods[i].goods_num)
        }
        return count
      },
      // 已支付的租金金额总数（不含押金）
      payedTotalMoney() {
        let total = 0
//        for (let i = 0; i < this.rentInfo.installment.length; i++) {
//          if (this.rentInfo.installment[i].i_pay_state == '1') {
//            total += parseFloat(this.rentInfo.installment[i].i_per_amount)
//          }
//        }
//        return total
        if (this.orderInfo.rent_info.r_ins_num == 0) { // 全款
          total = parseFloat(this.orderInfo.order_info.pay_amount)
        } else { // 分期
          for (let i = 0; i < this.rentInfo.installment.length; i++) {
            if (this.rentInfo.installment[i].i_pay_state == '1') {
              total += parseFloat(this.rentInfo.installment[i].i_per_amount)
            }
          }
        }
        return total
      }
    },
    methods: {
      gotoOrderDetail() {
        this.$router.push({name: 'order-rent-detail', params: {id: this.orderId}})
      },
      getRentOrderInfo(orderId) {
        this.$request.getRentOrderInfo(orderId).then(data => {
          this.rentInfo = data
        })
      },
      confirmServer(service) {
        this.$request.confirmRentService(service.s_id).then(data => {
          this.$toast('确认服务成功')
          service.s_state = '2'
        }).catch(e => {
          this.$toast('确认服务失败:' + e.msg)
        })
      },
      getOrderInfo(id) {
        this.$request.getOrderInfo(id).then(data => {
          this.orderInfo = data
        }).catch(e => {
          console.error('获取订单明细失败:' + e.msg)
        })
      },
      pay(installment) {
        payPop({paySn: installment.i_pay_sn, orderId: this.orderId})
      }
    }
  }
</script>

<style>

</style>